<template>
	<view class="bb">
		<view>
			<picker mode="selector" :range="arr" @change="getleixing">
				<view>选择反馈类型
				</view>
			</picker>
			<view class="iconfont icon-youjiantou"></view>
		</view>
		<textarea placeholder="请输入反馈信息" maxlength="300" @blur="text">
		</textarea>
		<input placeholder="手机/邮箱/QQ(选题)" v-model="lianxi" />
		<view>上传图片（最多6张）</view>
		<image v-for="(item,index) in imageArr" :src="IP+item" :key="index" mode="widthFix"></image>
		<view class="tu" @click="uploadImg"  mode="widthFix">+</view>
		
		<!-- <image @click="uploadImg" src="../../static/上传图片.png" mode="widthFix"></image> -->
		<button type="warn" @click="tijiao">提交</button>
	</view>

</template>

<script>
	import {
		toRefs,
		onMounted,
		reactive,
		computed
	} from 'vue'
	import http from '../../utils/http.js'
	import store from '../../utils/http.js'
	import {
		useStore
	} from 'vuex'
	export default {
		setup() {
			const {
				state,
				commit,
				dispatch,
				getters
			} = useStore();
			let data = reactive({
				IP: computed(() => state.IP),
				arr: ["发货问题", "卖家服务承诺不履行", "卖家服务态度问题", "卖家拒绝使用支付宝"],
				leixing: "",
				xinxi: "",
				lianxi: "",
				imageArr: [],
				dizhi:'',
				getleixing: (e) => {
					let a = e.detail.value
					data.leixing = data.arr[a]
					console.log(data.leixing)
				},
				text: (e) => {
					data.xinxi = e.detail.value

				},
				tijiao: () => {
				if(data.leixing!=''&&data.xinxi!=''&&data.lianxi!=''&&data.dizhi!=''){
					http({
						url:'/SetBasic/tijiaofankui',
						method:'post',
						data:{
							leixing:data.leixing,
							xinxi:data.xinxi,
							lianxi:data.lianxi,
							dizhi:data.dizhi
						}
					}).then((res)=>{
						console.log(res)
						uni.showToast({
							title:'提交成功',
							duration:1500
						})
					})
				}else{
					uni.showToast({
						icon:'error',
						title:'请输入完整信息',
						duration:1500
					})
				}
				
				},
				uploadImg() {
					const token =uni.getStorageSync('token')
					uni.chooseImage({
						count: 1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: data.IP + '/fanKuitupian',
								filePath: tempFilePaths[0],
								name: 'file',
								header:{
									'token':token
								},
								success: (resl) => {
									console.log( resl.data)
									data.dizhi=resl.data
									data.imageArr.push('/uploads/fankui/' + resl.data)
									if (data.imageArr.length > 6) {
										data.imageArr.splice(0, 1)
									}
								}
							});
						}
					})
				}
			})

			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	.bb {
		padding: 0 30rpx;

		&>view {
			&:nth-child(1) {
				margin-top: 50rpx;
				border: 1rpx solid #E4E4E4;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
			}

			&:nth-child(4) {
				color: #999999;
				margin: 35rpx 30rpx;
			}
		}

		&>textarea {
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 25rpx;
			width: 690rpx;
			height: 350rpx;
			border: 1rpx solid #E4E4E4;
			border-radius: 10rpx;
		}

		&>input {

			margin-top: 25rpx;
			border: 1rpx solid #E4E4E4;
			padding: 30rpx;
			border-radius: 10rpx;
		}

	}

	.tu {
		width: 200rpx;
		height: 200rpx;
		background-color: #F2F2F2;
		margin: 30rpx 0;
		color: #CCCCCC;
		font-size: 150rpx;
		outline: 1rpx solid #CCCCCC;
		text-align: center;
	}
</style>
